<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="提交账号：">
          <el-input
            v-model="formInline.merchantName"
            placeholder="商户账户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="formInline.status" placeholder="全部">
            <el-option label="待处理" value="1"></el-option>
            <el-option label="已处理" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane v-for="item in activeNameList" :key="item.id" :label="item.label+ '（'+ item.num + '）'" :name="item.activeName"></el-tab-pane>
            <!-- <el-tab-pane v-for="(item,index) in activeNameList" :key="item.id" :label="item.label+ '（'+ totalInfo.total + '）'" name="first"></el-tab-pane> -->
            <!-- <el-tab-pane :label="'商家入驻'+ '（'+ totalInfo.merchantApplyNum + '）'" name="second"></el-tab-pane>
            <el-tab-pane :label="'提现异常'+ '（'+ totalInfo.withdrawErrorNum + '）'" name="third"></el-tab-pane>
            <el-tab-pane :label="'预警消息'+ '（'+ totalInfo.warningMessageNum + '）'" name="fourth"></el-tab-pane>
            <el-tab-pane :label="'神椰订单'+ '（'+ totalInfo.shenyeOrderNum + '）'" name="fifth"></el-tab-pane>
            <el-tab-pane :label="'结算申请'+ '（'+ totalInfo.withdrawErrorNum + '）'" name="sixth"></el-tab-pane> -->
        </el-tabs>
        <ex-table
          ref="table"
          :loading="loading"
          :table-column="tableColumn"
          :table-data="tableData"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        >
        <template v-slot:sideId="{ scope }">
          <span v-if="scope.row.sideId=='1'">监管端</span>
          <span v-else-if="scope.row.sideId=='2'">保险端</span>
          <span v-else>-</span>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row.businessTypeDict,scope.row.businessRelevance,scope.row.merchantName,scope.row)">立即处理</el-button>
          <el-button @click="resolved(scope.row)" v-if="scope.row.status == 1">已解决</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog
      v-if="detailDialog"
      :id="id"
      :name="name"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components
import { getlist,waitingProcessNum,waitingProcessSolve } from "@/api/index";
import handlePageMixin from '@/mixins/handlePageMixin'
import DetailDialog from './components/DetailDialog'
export default {
  name: "TodoCenter",
  components: {
    DetailDialog
  },
  mixins: [handlePageMixin],
  data() {
    return {
      id:'',
      detailDialog: false,
      changeIndex: 0,
      loading: false,
      formInline: {
        merchantName: "", //商户名称
        businessType: "", //任务类型 "1":"商家入驻","2"："提现审核"  ,"3":"增发申请"
        status:'',//处理状态 1：待处理 2：已处理
      },
      date: [],
      activeName: 'first',
      activeNameList:[
        {id:1,label:'全部',activeName:'first',num:0},
        {id:2,label:'商家入驻',activeName:'second',num:0},
        {id:3,label:'合同审批',activeName:'third',num:0},
        {id:4,label:'提现异常',activeName:'fourth',num:0},
        {id:5,label:'预警消息',activeName:'fifth',num:0},
        {id:6,label:'神椰订单',activeName:'sixth',num:0},
        {id:7,label:'结算申请',activeName:'seventh',num:0},
        {id:8,label:'赚卡退款',activeName:'eighth',num:0},
      ],
      status: "", //处理状态 1：待处理 2：已处理
      startTime: "", //开始时间
      endTime: "", //结束时间
      pageSize: 10,
      tableData: [],
      totalInfo:{},//代办事项数量
      tableColumn: [
        { label: "预警端" ,slot: true, slotName: "sideId"},
        { prop: "jobNo", label: "任务编号" },
        { prop: "jobName", label: "任务名称",},
        { prop: "businessTypeDict", label: "所属业务",width:"120"},
        { prop: "costTime", label: "已耗时", },
        { prop: "statusDict", label: "状态",width:"120"},
        { prop: "merchantName", label: "提交账号" },
        { prop: "createTime", label: "创建时间", },
        { label: "操作", slot: true, slotName: "operate",width:"260" },
      ],
    };
  },
  created() {
     if(this.$route.query.id){
        this.activeName = 'sixth'
        this.formInline.businessType = 8
      }
    this.getList();
    this.getWaitingProcessNum()
  },
  methods: {
    //  查询代办事项列表数量
    getWaitingProcessNum(){
      const params = {
        merchantName: this.formInline.merchantName,
        status: this.formInline.status,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      waitingProcessNum(params).then((res) => {
          this.totalInfo = res.result
          this.activeNameList[0].num = this.totalInfo.total;//全部
          this.activeNameList[1].num = this.totalInfo.merchantApplyNum; //商家入驻
          this.activeNameList[2].num = this.totalInfo.merchantEquityCardContractNum; //合同审批
          this.activeNameList[3].num = this.totalInfo.withdrawErrorNum; //提现异常
          this.activeNameList[4].num = this.totalInfo.warningMessageNum; //预警消息
          this.activeNameList[5].num = this.totalInfo.shenyeOrderNum; //神椰订单
          this.activeNameList[6].num = this.totalInfo.shenyeSettleNum; //结算申请
          this.activeNameList[7].num = this.totalInfo.merchantEquityCardRefundNum; //赚卡退款
       
      }).finally(() => {
       
      })
    },
    onSubmit() {
      console.log(this.date)
      if(this.date==null){
        this.startTime = '';
        this.endTime = '';
      }else{
        this.startTime = this.date[0];
        this.endTime = this.date[1];
      }
      
      console.log(this.formInline);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
      this.getWaitingProcessNum()
    },
    reset() {
      this.formInline.merchantName = "";
      this.formInline.businessType = "";
      this.formInline.status = "";
      this.date = [];
      this.startTime = "";
      this.endTime = "";
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
      this.getWaitingProcessNum()
    },
    handleClick(tab, event) {
      let index = tab.index;
      if (index == 0) {
        this.formInline.businessType = ""; //全部
      } else if (index == 1) {
        this.formInline.businessType = 1 //商家入驻
      } else if (index == 2) {
        this.formInline.businessType = 9 //合同审批
      }else if (index == 3) {
        this.formInline.businessType = 5 //提现异常
      }else if (index == 4) {
        this.formInline.businessType = 6 //预警消息
      } else if (index == 5) {
        this.formInline.businessType = 7 //神椰订单
      } else if (index == 6) {
        this.formInline.businessType = 8 //结算申请
      } else if (index == 7) {
        this.formInline.businessType = 10 //赚卡退款
      } 
      this.pageOptions.pageNum = 1
      this.getList();
    },
    lookDetail(e,id,name,item) {
      console.log(e,id);
      //businessType: 1 商家入驻 2 提现审核 5 提现异常 6 预警消息 7 神椰订单
      if(item.businessType == 1){
        this.$router.push({ path: "/merchants/merchantsAudit",query:{id:1} });
      }else if(item.businessType == 5){
        this.$router.push({ path: "/moneyManagement/withdrawal-list",query:{id:1}});
      }else if(item.businessType == 6){
          let url = ''
          if(item.sideId=='2'){ //保险端
            url = process.env.VUE_APP_INSURANCE + 'login'
          }else{ //监管端
            url = process.env.VUE_APP_SUPERVISE + 'login'
          }
          window.open(url, 'target');
      }else if(item.businessType == 7){
         // 神椰乐园
        if(item.jobName.includes('椰椰邮差')){
           this.$router.push({ path:"/consumeMiningManagement/onlineClockingActivity",query:{id:3} });
        }else if(item.jobName.includes('集市兑换')){
          // 集市兑换
          this.$router.push({ path: "/commodityExchange", });
        }
      }else if(item.businessType == 8){
        this.$router.push({ path: "/merchantSettlement"});
      }else if (item.businessType == 9) { //合同审批
        this.$router.push({ path: "/merchants/contractReview" });
      }else if (item.businessType == 10) { //赚卡退款
        this.$router.push({ path: "/zhuanReturn" });
      }
      // else{
      //   this.id = id
      //   this.name = name
      //   console.log(this.id,this.name)
      //   this.detailDialog = true
      // }
    },
    getList() {
      const params = {
        ...this.pageOptions,
        merchantName: this.formInline.merchantName,
        businessType: this.formInline.businessType,
        status: this.formInline.status,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      //代办任务列表
      this.loading = true;
      getlist(params).then((res) => {
        const { total, records } = res.result
        this.tableData = records;
        this.$refs.table.pageOptions.total = total
      }).finally(() => {
        this.loading = false
      })
    },
      //已解决
      resolved(row){
      this.$confirm('是否确认解决待办，点击确认将关闭待办事项？', '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // type: 'warning',
          // center: true,
        }).then(() => {
          var params = {
            businessRelevance: row.businessRelevance,
          };
          waitingProcessSolve(params).then((res) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(()=>{
              this.getList()
            },500)
          });
        }).catch(() => {});
    },
    _handleSuccess() {
      this.getList()
    }
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
</style>
